<template>
  <div class="person">
    <h2>{{ list }}</h2>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {type Persons} from '@/types'
  import {defineProps,withDefaults} from 'vue'

    //接收父组件传来的list
    defineProps(['list'])

    //接收父组件传来的list并保存
    //let propsRet=defineProps(['list'])

    //接收父组件传来的list + 限制其类型
    //defineProps<{List:Persons}>()

    //接收父组件传来的list + 限制其类型 + 限制必要性（不必要）
    //defineProps<{List?:Persons}>()

    //接收父组件传来的list + 限制其类型 + 限制必要性（不必要）+ 设置默认值
    //withDefaults函数设置其默认值，参数一为接收的数据名，参数二为一个对象，里面属性名对应一个函数，返回想设置的默认值
    /*withDefaults(defineProps<{list?:Persons}>(),{
            list:()=>[{id:1,name:"沐七",age:18}]
    })*/

    /*
    {
        "list": [
            {
                "id": 1,
                "name": "沐七",
                "age": 18
            },
            {
                "id": 2,
                "name": "沐七",
                "age": 19
            },
            {
                "id": 3,
                "name": "沐七",
                "age": 20
            }
        ]
    }
    */
    //返回值一目了然，是个对象，对象的key是props属性名，vlaue就是传来的具体值
    //console.log(propsRet);
    

</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>